html,
body {
    height: 100%; 
    width: 100%;
    background: #000;
    overflow: hidden;
} 

 #exiter,#shower{
    cursor: pointer;
    width:60px;
    height: 32px;
    background-color: #1681c4; 
    position: fixed;
    top:40px;
    right:100px;
    z-index: 1;
    line-height: 33px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    border-radius: 3px;
    .safety{
        font-size: 16px; 
        color: #fff;
        display: inline-block;
        width: 23px;
        &.iconxialasanjiao{
            font-size: 20px;
            display: inline-block;
            border-left: 1px rgba(0,0,0,.2) solid;
            margin-right: -5px;
        }
    }
    .iconBox{
        position: relative;
        .exitText{
            position: absolute;
            top:28px;
            width: 60px;
            height: 32px;
            background-color: #1681c4;
            color: #fff;
            font-size: 12px;
            text-align: center;
            border-radius: 4px;
            left: -9px;
            display: none;
        }
    }
    &:hover{
        .iconBox .exitText{
            display: block;
        }
    }
}

#shower{
    .safety{
        width:14px;
    }
    .text{
        font-size: 12px;
        color:#fff;
    }
} 


#containerContent{
    width:100%;
    height: 100%;
    overflow: hidden;
}

#container{
    max-width: 1920px;
    min-width: 1530px;
    overflow: hidden;
    margin: 0 auto;
    height: 864px; 
    display: none;
}

#app {
    height: 100%;
    background: url(../imgs/bg.jpg) no-repeat;
    position: relative;
    color: #fff;
    background-size: cover;

    .header {
        position: absolute;
        width: 460px;
        left: 50%;
        top: 36px;
        margin-left: -230px;
        text-align: center;
        z-index: 1;

        .text {
            color: rgb(158, 255, 255);
            font-size: 44px;
            letter-spacing: 1px;
            text-align: center;
        }

    }

    .chartContent {
        height: 100%;

        /* 左 */
        .leftBar { 
            overflow: hidden;  
            z-index: 1;
            position: absolute;
            top: 7%;
            left: 0px;
            width: 21%;
            bottom: 15px;

            .leftBg{
                height: 100%;
                background: url(../imgs/lBg.png) repeat-x;
                margin-left: 10px;
                margin-bottom: 10px;
                background-size: cover; 
            }

            .chartComm{
                height: 33%;
                padding-left: 7%;
                border:1px transparent solid;
                position: relative;
                .title{
                    color: rgb(80, 196, 250);
                    font-size: 20px;
                    letter-spacing: 1px; 
                    margin-top: 12%;
                    margin-bottom: 10%;
                    .ck{
                        display:inline-block;
                        background: url(../imgs/ck.png) no-repeat;
                        width:21px;
                        height: 21px;
                        vertical-align: top;
                        margin-top: -1px;
                    }
                    .watchType{
                        margin-left: -4px;
                    }
                }
                .bTitle{
                    position: absolute;
                    color: rgb(176, 184, 180);
                    font-size: 20px;
                    letter-spacing: 1px;
                    bottom:5%; 
                    .bWatchValue{
                        color: rgb(182, 185, 240);
                    }
                }
            }

            #ltChart{
                width:250px;
                height:100px;
            }

            #lmChart{
                width:250px;
                height:100px;
            }

            #lbChart{
                width:250px;
                height:100px;
            } 
            
        }

        /* 右 */
        .rightCharts {
            position: absolute;
            width: 24%;
            top:7%;
            overflow: hidden; 
            bottom:0;
            z-index: 1;
            right:0px;

            .title{
                color: rgb(80, 196, 250);
                font-size: 14px;
                letter-spacing: 1px;
                margin-top: 12%;
                margin-bottom: 10%;
                .ck{
                    display:inline-block;
                    background: url(../imgs/ck.png) no-repeat;
                    width:21px;
                    height: 21px;
                    vertical-align: top;
                    margin-top: -3px;
                }
                .watchType{
                    margin-left: -4px;
                }
            }
            

            .rBg{
                background: url(../imgs/lBg.png) repeat-x;
                background-size: cover;
                height: 62%;
                border: 1px transparent solid;
            }

            .rightTopChart{ 
                margin-left: 7%; 
            }

            .rightBottomChart{
                position: absolute;
                bottom: 15px;
                top: 62%;
                overflow: hidden; 
                width: 100%;

                .title{
                    
                }
                .rBgBox{
                    box-sizing: border-box;
                    padding-top:20px;
                    height: 100%;
                    width: 100%;
                }
                .rBg{
                     height: 100%;
                     width: 100%;
                     box-sizing: border-box;
                     padding-left: 7%;
                }
            }
            
            #rtChart{
                width:350px;
                height:410px; 
            }

            #rbChart{
                width:100%;
                height:215px;
            }
        }

        /* 中 */
        .middleInfo { 
            margin: 0 24% 0px 21%;
            width: 54.5%;
            box-sizing: border-box;
            padding-top: 7%; 
            position: relative;
            padding-bottom: 12px;
            padding-left: 40px;
            padding-right: 40px;
            height: 100%;

            .title{
                color: rgb(80, 196, 250);
                font-size: 22px;
                .ck{
                    display:inline-block;
                    background: url(../imgs/ck.png) no-repeat;
                    width:21px;
                    height: 21px;
                    vertical-align: top;
                    margin-top: -1px;
                }
            }
            .bTitle{
                position: absolute;
                right: 40px;
                bottom: 300px;
                font-size: 18px;
                z-index: 1;
                .cCityName{
                    color:#8f9797;
                }
                .cCityVlaue{
                    color: #1f776a;
                }
            }

            #hexagonBallCanvas{
                width: 180px;
                height: 140px;
                position: absolute;  
                top: 101px;
                z-index: 10;
                display: none;
            }

            /* 中间地球园 */
            .carousel {
                padding: 20px;
                perspective: 800px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center; 
                position: relative;
                z-index: 3;
                width:665px;
                box-sizing: border-box; 
                margin:0 auto;

                .line {
                    position: absolute;
                    width: 588px;
                    top: -100px; 
                    margin: auto;
                    border: 3px solid rgba(9, 33, 99, 0.7); 
                    height: 400px;
                    border-radius: 50%;
                    transform: rotateY(-10deg) rotateX(72deg);
                    left: 24px;
                     
                }

                &>* {
                    -webkit-box-flex: 0;
                    -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
                }

                .carouselFigure {
                    margin: 0;
                    width: 40%;
                    transform-style: preserve-3d;

                    &.transition{
                        transition: transform 0.5s;
                    } 

                    .item {
                        width: 100%;
                        box-sizing: border-box;
                        padding: 0 0px; 
                        &.selected{
                           .selBg{
                               display: block;
                           }
                        }

                        .selBg{
                            position: absolute;
                            width: 111px;
                            background: url(../imgs/bubble.png) no-repeat;
                            background-position: -11px -6px;
                            height: 111px;
                            z-index: -1;
                            display: none;
                        }

                        .info {
                            background: url(../imgs/bubb.png) no-repeat;
                            background-size: 106px 108px;
                            height: 206px;
                            width: 140px;
                            text-align: center;
                            background-position: 0px 5px;
                            &.rotateY{
                                transform: rotateY(180deg);
                            } 
                          
                            .bCirecle{
                                width: 104px;
                                height: 111px;
                                border-radius: 50%;  
                                .cName{
                                    padding-top: 37px;
                                    padding-bottom: 5px;
                                }
                            }
                        } 
                    }

                    .item:not(:first-of-type) {
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                  
                }

                .animateCarousel {
                    transform-style: preserve-3d;
                    animation: animateCarousel 50s infinite;
                    animation-timing-function: linear;
                    transform: rotateX(-12deg) rotateY(0rad); 
                    &.paused{
                        animation-play-state: paused;
                    }
                }

                @keyframes animateCarousel {
                    from {
                        transform: rotateX(-12deg) rotateY(0rad);
                    }

                    to {
                        transform: rotateX(-12deg) rotateY(6.28rad);
                    }
                }
            }

            .lampHolder { 
                position: absolute;
                left: 50%;
                margin-left: -332px;
                top: 128px;
                z-index: 1;

                /*  灯座 */
                .fire {
                    width: 256px;
                    height: 216px;
                    margin-left: 157px;
                    margin-top: 16px;
                   
                    .bg{
                        background: url(../imgs/fire.png) no-repeat 2px -31px;
                        background-size: 121%;
                        width: 300px;
                        height: 249px;
                    }
                }

                .disk {
                    width: 700px;
                    height: 700px;
                    margin-top: -395px;
                    margin-left: -9px;
                    transform: rotateX(75deg);
                    transform-style: preserve-3d;

                    .diskBg {
                        height: 100%;
                        background: url(../imgs/disk.png) no-repeat;
                        background-size: 100%;
                        animation: diskRoute 10s infinite;
                        animation-timing-function: linear;
                    }

                    @keyframes diskRoute {
                        from {
                            transform: rotateZ(360deg);
                        }

                        to {
                            transform: rotateZ(0deg);
                        }
                    }

                }
            }

            .figureBox{
                height: 461px;
                .earthCity{
                    height: 246px;
                    position: relative;
                    z-index: 4;
                }
            }


            .dataBox{
                background: url(../imgs/lBg.png) repeat-x;
                background-size: cover; 
                z-index: 10 !important;
                padding: 30px 30px 30px 40px;
                position: absolute;
                bottom: 15px;
                right: 10px;
                left: 20px;
                box-sizing: border-box;
               

                .tbData{
                    margin-top: 30px;
                    width:100%;
                    .tHead{
                        th{
                            text-align: left;
                            font-size: 12px;
                            font-weight: normal;
                            color: rgba(54, 255, 211, 1);
                             height: 25px;
                             
                        }
                       
                    }
                    .tbody{

                        tr{
                            display: none;
                        }
                        td{
                            text-align: left;
                            font-size: 12px;
                            font-weight: normal;
                            color: rgb(59,228,214); 
                            height: 25px;
                        }
                        .col-2 td{
                            color:rgb(64,201,218);
                        }
                        .col-3 td{
                            color:rgb(69,174,222);
                        }
                        .col-4 td{
                            color:rgb(74,147,226);
                        }
                        .col-5 td{
                            color:rgb(80, 120, 230);
                        }
                    } 
                }
            }



        }
    }

}

#starBgCanvas{
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom: 0px;
}

/*  星空 */
#starBg {
    width: 1px;
    height: 1px;
    animation: animStar 150s linear infinite;
    margin-left: -1680px;
    position: fixed;
    top: 0px;

    .star {
        width: 30px;
        height: 30px;
        background: url("../imgs/star.png") no-repeat;
        position: absolute;
        background-size: 100% 100%;
    }

    @keyframes animStar {
        from {
            transform: translateX(0px);
        }

        to {
            transform: translateX(1680px);
        }
    }
}